<template>
    <div class="page-specific">
        <el-container style="height: 850px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(70, 76, 91); display: flex; justify-content: flex-end; align-items: center">
                
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click="handlePassword">
                        <i class="el-icon-info" style="margin-right: 5px;"></i>修改密码</el-button>
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click.native="logout">
                        <i class="el-icon-remove" style="margin-right: 5px;"></i>退出登录</el-button>
                </div>
                
            </el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '2', '3','4', '5']"  ref="menus" @close="handleClose">
                        
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-star-on"></i><router-link to="/firstPage"><span style="font-size: 18px">首页</span></router-link></template>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-user-solid"></i><span style="font-size: 18px">班级学员管理</span></template>
                            
                                <el-menu-item index="2-1">
                                    <router-link to="/class">班级管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    <router-link to="/stu">学员管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-s-help"></i><span style="font-size: 18px">系统信息管理</span></template>
                            
                                <el-menu-item index="3-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-menu"></i><span style="font-size: 18px">课程教务管理</span></template>
                            
                                <el-menu-item index="4-1">
                                    <router-link to="/course">课程管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="4-2">
                                    <router-link to="/course-manage">课程安排</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-s-data"></i><span style="font-size: 18px">数据统计管理</span></template>
                            
                                <el-menu-item index="5-1">
                                    <router-link to="/emp-rep">员工信息统计</router-link>
                                </el-menu-item>
                                <el-menu-item index="5-2">
                                    <router-link to="/stu-rep">学员信息统计管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    
                    <!--修改密码对话框-->
                    <el-dialog ref="form" title="修改密码" :visible.sync="dialogPassWordVisible" width="30%">
                    <el-form ref="form" :model="theEmp" label-width="80px" size="mini">
                        <el-form-item label="用户名">
                            <el-input v-model="theEmp.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>

                        <el-form-item label="新密码">
                            <el-input type="password" v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
                        </el-form-item>

                        
                        <el-form-item>
                            <el-button type="primary" @click="updatePassword">提交</el-button>
                            <el-button @click="dialogPassWordVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>
                    
                    <div class="parentDiv">
                        <div class="leftSide">
                            <div class="childDiv1">
                                <div class="title">学员性别统计</div>
                                <div id="genderChart"></div>
                            </div>
                            <div class="childDiv2">
                                <div class="title">班级人数统计</div>
                                <div id="classChart"></div>
                            </div>
                        </div>
                        <div class="rightSide">
                            <div class="title">学员学历统计</div>
                            <div id="radarChart"></div>
                        </div>
                    </div>



                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

import { removeToken, getEmp} from '@/utils/auth'
import { updateEmp, selectByEmpId } from '@/api/emp'

import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';

import { genderCount, maleEduCount, femaleEduCount, classCount} from "@/api/stu.js";

import {
  TitleComponent,
} from 'echarts/components';

import { RadarChart } from 'echarts/charts';

export default {
    data() {
        return {
            genderData: [],
            classData: [],
            maleData: "",
            femaleData: "",
            maleEduData: [],
            femaleEduData: [],
            barChart: null,
            classChart: null,
            radarChart: null,

            male1: {
                stuEdu: "初中",
                count: 0
            },
            male2: {
                stuEdu: "高中",
                count: 0
            },
            male3: {
                stuEdu: "大专",
                count: 0
            },
            male4: {
                stuEdu: "本科",
                count: 0
            },
            male5: {
                stuEdu: "硕士",
                count: 0
            },
            male6: {
                stuEdu: "博士",
                count: 0
            },

            female1: {
                stuEdu: "初中",
                count: 0
            },
            female2: {
                stuEdu: "高中",
                count: 0
            },
            female3: {
                stuEdu: "大专",
                count: 0
            },
            female4: {
                stuEdu: "本科",
                count: 0
            },
            female5: {
                stuEdu: "硕士",
                count: 0
            },
            female6: {
                stuEdu: "博士",
                count: 0
            },

            theEmp: {},
            oldPassword: "",
            newPassword: "",
            dialogPassWordVisible: false,
        }
    },
    created() {
        // 注册必须的组件
        echarts.use([
            TitleComponent,
            TooltipComponent,
            LegendComponent,
            RadarChart,
            CanvasRenderer,
            LabelLayout,
            GridComponent, 
            BarChart
        ]);

    },
    methods: {
        handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath);
        },
        //退出登录
        async logout() {
            removeToken();
            this.$router.push('/login')
        },

        //修改密码
        handlePassword() {
            this.oldPassword = this.theEmp.password;
            this.newPassword = '';
            this.dialogPassWordVisible = true;
        },

        updatePassword() {
            if (this.newPassword === this.oldPassword) {
                this.$message.error("新密码与旧密码一致, 重新输入!");
            } else {
                this.theEmp.password = this.newPassword;

                let operator;

                operator = updateEmp(this.theEmp);

                operator.then((resp) => {
                    if (resp.data.code == "1") {
                    this.dialogPassWordVisible = false;
                    //this.page();
                    this.$message({ message: "恭喜你，修改成功", type: "success" });
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });

            }
        },
    },
    mounted() {
        this.theEmp = JSON.parse(getEmp());
        selectByEmpId(this.theEmp.id).then((result) => {
                if (result.data.code == 1) {
                    this.theEmp = result.data.data;
                    this.theEmp;
                }
        });

        genderCount().then((result) => {
            this.genderData = result.data.data;
            this.maleData = this.genderData.find(item => item.name === "男性学员");
            this.femaleData = this.genderData.find(item => item.name === "女性学员");
        });
        maleEduCount().then((result) => {
            this.maleEduData = result.data.data;
            const foundMale1 = this.maleEduData.find(item => item.stuEdu === "初中");
            if (foundMale1 !== undefined) {
                this.male1 = foundMale1;
            }
            const foundMale2 = this.maleEduData.find(item => item.stuEdu === "高中");
            if (foundMale2 !== undefined) {
                this.male2 = foundMale2;
            }
            const foundMale3 = this.maleEduData.find(item => item.stuEdu === "大专");
            if (foundMale3 !== undefined) {
                this.male3 = foundMale3;
            }
            const foundMale4 = this.maleEduData.find(item => item.stuEdu === "本科");
            if (foundMale4 !== undefined) {
                this.male4 = foundMale4;
            }
            const foundMale5 = this.maleEduData.find(item => item.stuEdu === "硕士");
            if (foundMale5 !== undefined) {
                this.male5 = foundMale5;
            }
            const foundMale6 = this.maleEduData.find(item => item.stuEdu === "博士");
            if (foundMale6 !== undefined) {
                this.male6 = foundMale6;
            }
            //console.log(this.maleEduData)
            console.log(this.male1.count)
            console.log(this.male2.count)
            console.log(this.male3.count)
            console.log(this.male4.count)
            console.log(this.male5.count)
            console.log(this.male6.count)
        });
        femaleEduCount().then((result) => {
            this.femaleEduData = result.data.data;
            const foundFeMale1 = this.femaleEduData.find(item => item.stuEdu === "初中");
            if (foundFeMale1 !== undefined) {
                this.female1 = foundFeMale1;
            }
            const foundFeMale2 = this.femaleEduData.find(item => item.stuEdu === "高中");
            if (foundFeMale2 !== undefined) {
                this.female2 = foundFeMale2;
            }
            const foundFeMale3 = this.femaleEduData.find(item => item.stuEdu === "大专");
            if (foundFeMale3 !== undefined) {
                this.female3 = foundFeMale3;
            }
            const foundFeMale4 = this.femaleEduData.find(item => item.stuEdu === "本科");
            if (foundFeMale4 !== undefined) {
                this.female4 = foundFeMale4;
            }
            const foundFeMale5 = this.femaleEduData.find(item => item.stuEdu === "硕士");
            if (foundFeMale5 !== undefined) {
                this.female5 = foundFeMale5;
            }
            const foundFeMale6 = this.femaleEduData.find(item => item.stuEdu === "博士");
            if (foundFeMale6 !== undefined) {
                this.female6 = foundFeMale6;
            }
            //console.log(this.femaleEduData)
            console.log(this.female1.count)
            console.log(this.female2.count)
            console.log(this.female3.count)
            console.log(this.female4.count)
            console.log(this.female5.count)
            console.log(this.female6.count)
        });
        classCount().then((result) => {
            this.classData = result.data.data;
            //console.log(this.classData)
        });


        this.barChart = echarts.init(document.getElementById('genderChart'));
        this.classChart = echarts.init(document.getElementById('classChart'));
        this.radarChart = echarts.init(document.getElementById('radarChart'));
        
        let optionRadar = {
            title: {
                text: ' '
            },
            legend: {
                data: ['男', '女']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                { name: '初中', max: 4, textStyle: { color: 'blue' }},
                { name: '高中', max: 4 },
                { name: '大专', max: 4 },
                { name: '本科', max: 4 },
                { name: '硕士', max: 4 },
                { name: '博士', max: 4 }
                ],
                name: {
                    textStyle: {
                        color: '#202424',  // 设置指示器文本的颜色
                        fontSize: 16 
                    }
                }
            },
            series: [
                {
                name: '男 vs 女',
                type: 'radar',
                data: [
                    {
                    value: [this.male1.count, this.male2.count, this.male3.count, this.male4.count, this.male5.count, this.male6.count],
                    name: '男'
                    },
                    {
                    value: [this.female1.count, this.female2.count, this.female3.count, this.female4.count, this.female5.count, this.female6.count],
                    name: '女'
                    }
                ]
                }
            ]
        };

        let optionBar = {
            title: {
                text: ' '
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: [' ']
            },
            series: [
                {
                name: '男',
                type: 'bar',
                data: this.maleData.value
                },
                {
                name: '女',
                type: 'bar',
                data: this.femaleData.value
                }
            ]
        };

        let optionClass = {
            xAxis: {
                type: 'category',
                data: this.classData.map(item => item.className)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: this.classData.map(item => item.studentCount),
                type: 'bar'
                }
            ]
        };

        
        this.barChart.setOption(optionBar);
        this.classChart.setOption(optionClass);
        this.radarChart.setOption(optionRadar);
    },

    watch: {
        genderData: {
            handler(){
                this.barChart.setOption({
                    series: [
                        {
                        data: [this.maleData.value],
                        },
                        {
                        data: [this.femaleData.value],
                        }
                    ]
                });
            }
        },
        classData: {
            handler(){
                this.classChart.setOption({
                    xAxis: {
                        data: this.classData.map(item => item.className)
                    },
                    series: [
                        {
                        data: this.classData.map(item => item.studentCount),
                        }
                    ]
                });
            }
        },
        maleEduData: {
            handler(){
                this.radarChart.setOption({
                    series: [
                        {
                        data: [
                            {
                            value: [this.male1.count, this.male2.count, this.male3.count, this.male4.count, this.male5.count, this.male6.count],
                            name: '男'
                            },
                            {
                            value: [this.female1.count, this.female2.count, this.female3.count, this.female4.count, this.female5.count, this.female6.count],
                            name: '女'
                            }
                        ]
                        }
                    ]
                });
            }
        },
        femaleEduData: {
            handler(){
                this.radarChart.setOption({
                    series: [
                        {
                        data: [
                            {
                            value: [this.male1.count, this.male2.count, this.male3.count, this.male4.count, this.male5.count, this.male6.count],
                            name: '男'
                            },
                            {
                            value: [this.female1.count, this.female2.count, this.female3.count, this.female4.count, this.female5.count, this.female6.count],
                            name: '女'
                            }
                        ]
                        }
                    ]
                });
            }
        },
    }
}

</script>

<style>

.page-specific .parentDiv {
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: row;
}

.page-specific .leftSide {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.page-specific .childDiv1, .childDiv2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-specific .childDiv1 {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-specific .childDiv2 {
    flex: 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-specific .title {
    font-family: '楷体';
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
}

.page-specific .rightSide {
    flex-direction: column;
    align-items: center;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.page-specific #classChart {
    width: 500px;
    height: 800px;
    flex: 3;
}

.page-specific #genderChart {
    width: 400px;
    height: 400px;
    flex: 7;
    margin-bottom: 40px;
}

.page-specific #radarChart {
    width: 650px;
    height: 650px;
}

.router-link-active {
  text-decoration: none;
  color: rgb(0, 110, 255);
}
a{
  text-decoration: none;
  color: black;
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 

}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;

}
</style>